<template>
 <div class="app-container">
    <el-tabs :value="activeTab" @tab-click="changeTab">
      <el-tab-pane name="1" v-if="roleCheck('chatRoom-processed')" >
        <span slot="label">待处理列表</span>
        <toBeProcessedTable v-show="activeTab==='1'" :value="activeTab==='1'"/>
      </el-tab-pane>
      <el-tab-pane  label="举报记录" name="2"  v-if="roleCheck('chatRoom-report-log')">
        <reportLog v-show="activeTab==='2'"  :value="activeTab==='2'"/>
      </el-tab-pane>
      <el-tab-pane  label="禁言用户列表" name="3"  v-if="roleCheck('chatRoom-banned-table')">
        <bannedTable v-show="activeTab==='3'"  :value="activeTab==='3'"/>
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="4"  v-if="roleCheck('chatRoom-operating-log')">
        <operatingLog v-show="activeTab==='4'"  :value="activeTab==='4'"/>
      </el-tab-pane>
      <el-tab-pane  label="禁言通用设置" name="5"  v-if="roleCheck('chatRoom-banned-set')">
        <bannedSet v-show="activeTab==='5'"  :value="activeTab==='5'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import toBeProcessedTable from './toBeProcessedTable';
import reportLog from './reportLog';
import bannedTable from './bannedTable';
import operatingLog from './operatingLog';
import bannedSet from './bannedSet';

export default {
  name: 'member-chatRoom',
  components: {
    toBeProcessedTable,
    reportLog,
    bannedTable,
    operatingLog,
    bannedSet,
  },
  data() {
    return {
      activeTab: '1',
    };
  },
  mounted() { // tab页记录访问日志
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '会员信息', true) });
    if (!this.roleCheck('chatRoom-processed') && this.roleCheck('chatRoom-report-log')) {
      this.activeTab = '2';
    } else if (!this.roleCheck('chatRoom-processed') && !this.roleCheck('chatRoom-report-log') && this.roleCheck('chatRoom-banned-table')) {
      this.activeTab = '3';
    } else if (!this.roleCheck('chatRoom-processed') && !this.roleCheck('chatRoom-report-log') && !this.roleCheck('chatRoom-banned-table') && this.roleCheck('chatRoom-operating-log')) {
      this.activeTab = '4';
    } else if (!this.roleCheck('chatRoom-processed') && !this.roleCheck('chatRoom-report-log') && !this.roleCheck('chatRoom-banned-table') && !this.roleCheck('chatRoom-operating-log') && this.roleCheck('chatRoom-banned-set')) {
      this.activeTab = '5';
    }
    // const i = [this.roleCheck('chatRoom-processed'), this.roleCheck('chatRoom-report-log'), this.roleCheck('chatRoom-banned-table'), this.roleCheck('chatRoom-operating-log'), this.roleCheck('chatRoom-banned-set')].findIndex((value, index, arr) => value);
    // this.activeTab = (i + 1).toString();
    // alert(this.activeTab);
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab.name;
      // tab页记录访问日志;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, tab.label, true) });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
